<template>
  <el-table :data="goodsList" style="width: 100%" height="650px">
    <el-table-column label="索引" width="80">
      <template #default="scope"
        ><span>{{
          scope.$index + 1 + (pageData.count - 1) * pageData.limitNum
        }}</span></template
      >
    </el-table-column>
    <el-table-column prop="proname" label="商品名" />
    <el-table-column prop="brand" label="品牌" />
    <el-table-column label="图片">
      <template #default="scope">
        <img width="100" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="originprice" label="原价" />
    <el-table-column prop="discount" label="折扣数" />
    <el-table-column label="是否秒杀">
      <template #default="scope">
        <el-switch
          :model-value="Boolean(scope.row.isseckill)"
          @change="goodsIsseckillFlagChange(scope.row.proid, scope.row.isseckill)"
        />
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    layout="prev, pager, next"
    v-model:current-page="pageData.count"
    v-model:page-size="pageData.limitNum"
    :total="total"
    :style="{justifyContent: 'center'}"
  />
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { getGoodsListDataApi, updateGoodsIsseckillFlagApi } from "@/api/list.js";
const pageData = ref({
  // 控制列表页数的数据
  count: 1,
  // 控制一页展示多少商品的数据
  limitNum: 4,
});
// 创建一个新的空响应式数组准备存储请求回来的数据
const goodsList = ref([]);

// 设置分页器所需的总页数数据
const total = ref();

// 进行请求的方法
const goodsPageListDataGet = async () => {
  try {
    // console.log(pageData.value.count);
    // 用res接收请求的返回值
    const res = await getGoodsListDataApi({
      // 将页数和每页数量数据传入请求方法内
      count: pageData.value.count,
      limitNum: pageData.value.limitNum,
    });
    // console.log(res);
    // 将返回的数据放入提前准备好的数组中
    goodsList.value = res.data;
    // console.log(res);
    // 将总数放入总页数数据中
    total.value = res.total;
    // console.log(total.value);
    // console.log(JSON.parse(JSON.stringify(goodsList.value)));
  } catch (error) {
    console.log(error);
  }
};

// 更改商品是否秒杀的方法
const goodsIsseckillFlagChange = async (id, val) => {
  try {
    await updateGoodsIsseckillFlagApi({ proid: id, type: "isseckill", flag: !val });
    // 方法请求后再次调用请求数据的方法来更新页面
    await goodsPageListDataGet();
  } catch (error) {}
};

// 在页面首次渲染时就调用一次请求数据的方法
onMounted(() => {
  goodsPageListDataGet();
});

// 监听页数数据
// 因为页数数据是在pageData这个响应式对象中,所以需要使用getter函数才能监听到数据
watch(
  () => pageData.value.count,
  () => {
    // 再次调用请求数据的方法更新页面
    goodsPageListDataGet();
  }
);
</script>
<style lang="scss">
/* .el-table__row{
  max-height: 106px;
} */
</style>
